<template>
  <div class="bingPhone">
    <vue-header title="收货地址管理" :left-options="{backText: ''}">

    </vue-header>
    <div class="bingPhone-content">
      <div class="bingPhone-list">
        <div class="bingPhone-list-flex">
          <div class="bingPhone-list-flex-left">手机号码</div>
          <div class="bingPhone-list-flex-right">
            <x-input title="" name="mobile" v-model="form.phone" placeholder="请输入要绑定的手机号码" keyboard="number" is-type="china-mobile"></x-input>
          </div>
        </div>
        <div class="bingPhone-list-flex">
          <div class="bingPhone-list-flex-left">验&#8194;证&#8194;码</div>
          <div class="bingPhone-list-flex-center">
            <x-input title="" name="mobile" placeholder="请输入短信验证码" v-model="form.code" keyboard="number"></x-input>
          </div>
          <div class="bingPhone-list-flex-lRight">
            <div class="bingPhone-list-flex-lRight-but" v-if="isvist" @click="hanler()">获取验证码</div>
            <div class="bingPhone-content-btu-defu-disable" v-else>
              <span style="position: relative;top: 1px;display: inline-block;width:20px">{{tims}}</span>(&#8197;s&#8197;)</div>
          </div>
        </div>
      </div>
      <div class="bingPhone-content-btu">
        <div class="bingPhone-content-btu-defu" @click="sub()">
          <span :class="defualt?'bingPhone-content-btu-disable':''">确认绑定</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import vueHeader from "@/components/vue-header/index";
import { XInput } from "vux";
import { setTimeout } from "timers";
import { getCode, reg } from "@/api/personCenter";
export default {
  name: "bingPhone",
  components: {
    XInput,
    vueHeader
  },
  data() {
    return {
      form: {
        code: "",
        phone: ""
      },
      isvist: true,
      tims: 60,
      defualt: true
    };
  },
  watch: {
    form:{
      handler:function(val){
         if(val.phone&&val.code){
            this.defualt=false
         }else{
           this.defualt=true
         }
      },
      deep:true
    }
  },
  methods: {
    sub() {
      if(this.defualt){
        return;
      }
      let params = {
        accountType: "phone",
        account: this.form.phone,
        suid: "",
        bid: "",
        code: this.form.code,
        bindThird: {
          account: this.phone,
          accountType: "weixin",
          ext: {
            nickname: nickname,
            headimgurl: headimgurl,
            openid: openid
          }
        }
      };
      reg(params).then(res => {});
    },
    hanler() {
      this.isvist = false;
      this.setTime();
      this.getCode();
    },
    getCode() {
      let params = {
        phone: this.phone
      };
      getCode(params).then(res => {});
    },
    setTime() {
      setTimeout(() => {
        this.tims--;
        if (this.tims > 0) {
          this.setTime();
        }
        if (this.tims == 0) {
          this.tims = 60;
          this.isvist = true;
        }
      }, 1000);
    }
  }
};
</script>
<style lang="scss" scoped>
.bingPhone {
  background-color: #f0f0f0;
  height: 100%;
  .bingPhone-content-btu {
    margin: 0.7733rem 0;

    .bingPhone-content-btu-defu {
      background: linear-gradient(
        90deg,
        rgba(242, 3, 0, 1),
        rgba(254, 78, 19, 1)
      );
      border-radius: 0.08rem;
      margin: 0 1rem;
      height: 1.1733rem;
      line-height: 1.1733rem;
      font-size: 0.4267rem;
      font-weight: normal;
      color: rgba(255, 255, 255, 1);
      text-align: center;
    }
    .bingPhone-content-btu-defu {
    }
    .bingPhone-content-btu-disable {
      opacity: 0.5;
    }
  }
  .bingPhone-content {
    height: calc(100vh - 46px);
    overflow: auto;
    .weui-cell {
      padding: 0px;
    }
    ::-webkit-input-placeholder {
      color: rgba(204, 204, 204, 1);
      font-size: 0.4rem;
      font-weight: 500 !important;
    }
    :-moz-placeholder {
      color: rgba(204, 204, 204, 1);
      font-size: 0.4rem;
      font-weight: 500;
      text-align: right;
    }
    :-ms-input-placeholder {
      color: rgba(204, 204, 204, 1);
      font-size: 0.4rem;
      font-weight: 500;
      text-align: right;
    }
    .bingPhone-list-flex {
      display: flex;
      height: 1.3067rem;
      background: rgba(255, 255, 255, 1);
      border-radius: 0.08rem;
      margin: 0.4267rem 0.32rem 0;
      .bingPhone-list-flex-left {
        font-size: 0.4rem;
        font-weight: 500;
        color: rgba(51, 51, 51, 1);
        line-height: 1.3067rem;
        padding-left: 0.32rem;
      }
      .bingPhone-list-flex-center {
        flex: 1;
        line-height: 1.3067rem;
        margin-left: 0.6667rem;
        padding-right: 0.4rem;
      }
      .bingPhone-list-flex-right {
        flex: 1;
        line-height: 1.3067rem;
        margin-left: 0.6667rem;
        padding-right: 0.4rem;
      }
      .bingPhone-list-flex-lRight {
        display: flex;
        align-items: center;
        .bingPhone-content-btu-defu-disable {
          margin-right: 0.2133rem;
          width: 1.8667rem;
          height: 0.5867rem;
          line-height: 0.5867rem;
          text-align: center;
          background: rgba(204, 204, 204, 1);
          color: rgba(255, 255, 255, 1);
          font-size: 0.3467rem;
          border-radius: 0.08rem;
        }
        .bingPhone-list-flex-lRight-but {
          margin-right: 0.2133rem;
          width: 1.8667rem;
          height: 0.5867rem;
          line-height: 0.5867rem;
          text-align: center;
          padding: 0.2rem;
          background: linear-gradient(
            90deg,
            rgba(242, 3, 0, 1),
            rgba(254, 78, 19, 1)
          );
          border-radius: 0.08rem;
          font-size: 0.3467rem;
          color: rgba(255, 255, 255, 1);
        }
      }
    }
  }
}
</style>
